<template>
  <div class="userManage" id="user-manage">
    <!-- 整体卡片布局 -->

      <!-- 头部 -->
      <div class="topBox">
        <!-- 部门筛选 -->
        <div class="selectDept">
          <div class="font">部门筛选:</div>
          <Select
              class="department"
              v-model="department"
              clearable
              @on-clear="DeptClear"
              placeholder="请选择"
              style="width:130px;height:32px;"
          >
            <Option
                v-for="(item,index) in deptList"
                :value="item.ID"
                :key="item.ID"
                style="display: none;"
            >{{ item.title }}
            </Option>
            <el-tree :data="data" @on-select-change="handle"></el-tree>
          </Select>
        </div>
      </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          title: 'parent 1',
          expand: true,
          children: [
            {
              title: 'parent 1-1',
              expand: true,
              children: [
                {
                  title: 'leaf 1-1-1'
                },
                {
                  title: 'leaf 1-1-2'
                }
              ]
            },
            {
              title: 'parent 1-2',
              expand: true,
              children: [
                {
                  title: 'leaf 1-2-1'
                },
                {
                  title: 'leaf 1-2-1'
                }
              ]
            }
          ]
        }],
      deptList: [],
      department: ''
    }
  },
  methods: {
    handle() {
      let ID = ''
      let TITLE = ''
      this.data.forEach(item => {
        ID += `${item.id},`
        TITLE += `${item.title},`
      })
      ID = ID.substring(0, ID.length - 1)
      TITLE = TITLE.substring(0, TITLE.length - 1)
      this.department = ID
      this.deptList.push({ID, TITLE})
      cancelIdleCallback(this.deptList)
    },
    DeptClear(department) {
      // 部门筛选
    },
  }
};
</script>

<style scoped>

</style>
